<template>
  <div>
    <div style="display:flex">
      <div class="search-Box">
        <div class="left-box">
          <div class="item">
            <div class="in-item">
              <span class="label" style>学生学号:</span>
              <el-input size="mini" placeholder="输入搜索学号" v-model="tempSearchParam.studentNid"></el-input>
            </div>
            <div class="in-item">
              <span class="label" style="margin-left:35px">课程编号:</span>
              <el-input size="mini" placeholder="输入搜索学年" v-model="tempSearchParam.courseNid"></el-input>
            </div>
            <div class="in-item">
              <span class="label" style="margin-left:35px">教师编号:</span>
              <el-input size="mini" placeholder="输入搜索教师编号" v-model="tempSearchParam.teacherNid"></el-input>
            </div>
          </div>
          <div class="item">
            <div class="in-item">
              <span class="label">归属学年:</span>
              <el-input size="mini" placeholder="输入搜索学年" v-model="tempSearchParam.courseXn"></el-input>
            </div>
            <div class="in-item">
              <span class="label" style="margin-left:35px">归属学期:</span>
              <el-input size="mini" placeholder="输入搜索学期" v-model="tempSearchParam.courseXq"></el-input>
            </div>
            <div class="in-item">
              <span class="label" style="margin-left:35px">所属班级:</span>
              <el-input size="mini" placeholder="输入搜索班级名称" v-model="tempSearchParam.className"></el-input>
            </div>
          </div>
        </div>
        <div class="right-box">
          <div class="item">
            <el-button
              style="margin-left:20px"
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="search"
            >搜索</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-table :data="gradeList" stripe style="width: 100%;height:680px">
      <el-table-column prop="course.nid" label="课程编号"></el-table-column>
      <el-table-column prop="course.coursename" label="课程名字"></el-table-column>
      <el-table-column prop="student.nid" label="学生学号"></el-table-column>
      <el-table-column prop="student.name" label="学生名字"></el-table-column>
      <el-table-column prop="grade" label="成绩"></el-table-column>
      <el-table-column prop="xf" label="获得学分"></el-table-column>
      <el-table-column prop="gpa" label="获得绩点"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="checkInfo(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="foot-box">
      <div style="width:50%">
        <el-button type="success" @click="rufush">刷新</el-button>
      </div>
      <div style="width:50%">
        <el-pagination
          background
          :current-page="option.nowPage"
          layout="prev, pager, next"
          :page-size="option.size"
          :total="option.counts"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <div :class="['alertBg',isShow?'show':'']">
      <div class="alertForm">
        <el-form label-width="80px">
          <el-form-item label="课程名字">
            <el-input disabled v-model="showDisabledInfo.courseName"></el-input>
          </el-form-item>
          <el-form-item label="学生姓名">
            <el-input disabled v-model="showDisabledInfo.studentName"></el-input>
          </el-form-item>
          <el-form-item label="学生成绩">
            <el-input v-model="changeSubmitForm.grade"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="gradeSubmit" style="margin-left:-20px" type="primary">确定更改</el-button>
            <el-button @click="close">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import XLSX from "xlsx";
import { handlePageList, readExcel, handleMessage } from "../../plugins";
export default {
  data() {
    return {
      tempSearchParam: {},
      searchParam: {},
      gradeList: [],
      option: { size: 10, counts: 0, nowPage: 1 },
      isSearch: false,
      fileList: [],
      isShow: false,
      tempInfo: {},
      isEditGradeId: "",
      changeSubmitForm: {},
      showDisabledInfo: {}
    };
  },
  methods: {
    async gradeSubmit() {
      console.log(12);
      if (
        this.changeSubmitForm.grade <= 100 &&
        this.changeSubmitForm.grade >= 0
      ) {
        let res = await this.$http.put(
          `rest/Grade/${this.isEditGradeId}`,
          this.changeSubmitForm
        );
        handleMessage(this, res.data);
      } else {
        this.$message.error("输入成绩无效！请输入有效的成绩（0-100）");
      }
      this.getGradeList();
      this.close();
    },
    close() {
      this.showDisabledInfo = {};
      this.changeSubmitForm = {};
      this.isShow = false;
    },
    checkInfo(index, row) {
      this.isEditGradeId = row._id;
      this.changeSubmitForm = {
        grade: row.grade,
        course: row.course._id,
        student: row.student._id,
        xf: row.xf,
        gpa: row.gpa,
        isEdit: row.isEdit
      };
      this.showDisabledInfo.courseName = row.course.coursename;
      this.showDisabledInfo.studentName = row.student.name;
      this.isShow = true;
    },

    rufush() {
      this.option.nowPage = 1;
      this.isSearch = false;
      this.searchParam = {};
      this.searchParam.page = 1;
      this.tempSearchParam = {};
      this.getGradeList();
    },
    search() {
      this.option.nowPage = 1;
      this.searchParam.page = 1;
      this.isSearch = true;
      this.searchParam.studentNid = this.tempSearchParam.studentNid;
      this.searchParam.courseNid = this.tempSearchParam.courseNid;
      this.searchParam.teacherNid = this.tempSearchParam.teacherNid;
      this.searchParam.courseXq = this.tempSearchParam.courseXq;
      this.searchParam.courseXn = this.tempSearchParam.courseXn;
      this.searchParam.className = this.tempSearchParam.className;
      this.getSearchList();
    },
    handleCurrentChange(e) {
      this.option.nowPage = e;
      this.searchParam.page = e;
      if (this.isSearch) {
        this.getSearchList();
      } else {
        this.getGradeList();
      }
    },
    async getSearchList() {
      return new Promise((re, rj) => {
        this.$http.get("searchAPI/Grade", { params: this.searchParam }).then(res => {
          if (res.data.success) {
            this.gradeList = res.data.list;
            this.option.counts = res.data.counts;
          } else {
            this.$message.error(res.data.message);
          }
          re && re();
        });
      });
    },
    async getGradeList() {
      return new Promise((re, rj) => {
        this.$http.get("list/Grade", { params: this.searchParam }).then(res => {
          if (res.data.success) {
            this.gradeList = res.data.list;
            this.option.counts = res.data.counts;
          } else {
            this.$message.error(res.data.message);
          }
          re && re();
        });
      });
    }
  },
  created() {
    this.getGradeList();
  }
};
</script>

<style scoped>
.upload {
  margin-left: 50px;
}
.search-Box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.left-box {
  width: 70%;
}
.right-box {
  width: 30%;
}
.search-Box .item {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.search-Box .item:nth-child(1) {
  margin-top: 0;
}
.search-Box .in-item {
  display: flex;
  align-items: center;
}

.search-Box .in-item {
  margin-left: 50px;
}
.search-Box .in-item:nth-child(1) {
  margin: 0;
}
.in-item .label {
  width: 100px;
  font-size: 14px;
  text-align: right;
  margin-right: 10px;
}
.foot-box {
  display: flex;
  margin-top: 20px;
  align-items: flex-end;
  padding: 0 50px;
  padding-right: 80px;
  justify-content: space-between;
}
.alertBg {
  display: none;
}
.alertForm {
  padding-left: 10px;
}
.show {
  display: flex;
}
</style>